<template>
  <div class="um-total">
    <div class="um-tab">
      <div class="tab-top">
        <div class="top-first">
          <h2>认证管理</h2>
          <h5>教师认证</h5>
        </div>
        <div class="top-two">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>认证管理</el-breadcrumb-item>
            <el-breadcrumb-item>教师认证</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div>
        <el-input
          placeholder="根据教师名搜索"
          prefix-icon="el-icon-search"
          v-model="teachername"
          style="width:150px;margin-left: 50px;"
        >
        </el-input>
        <el-button @click="selectWrt">搜索</el-button>
      </div>
      <div class="tab-list">
        <el-table
          ref="multipleTable"
          :data="wrts"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="ID" width="300">
            <template slot-scope="scope">{{ scope.row.tid }}</template>
          </el-table-column>
          <el-table-column label="认证教师" width="320">
            <template slot-scope="scope">{{ scope.row.type }}</template>
          </el-table-column>
          <el-table-column label="用户名" width="320">
            <template slot-scope="scope">{{ scope.row.username }}</template>
          </el-table-column>
          <el-table-column label="操作" width="320">
            <template slot-scope="scope">
              <el-button type="primary" @click="delTeacher(scope.row.tid)"
                >同意</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      wrts: [],
      total: 1,
      teachername: '',
      //当前页
      currentPage: 1,
      //每页显示条数
      pageSize: 5,
    }
  },
  methods: {
    async selectWrt() {
      const that = this
      const { data: res } = await axios.get(
        'http://localhost:81/wrt/getAllWrt?teachername=' +
        that.teachername +
          '&currentPage=' +
          that.currentPage +
          '&pageSize=' +
          that.pageSize
      )
      console.log('查到待认证信息', res)
      that.wrts = res.data
      that.total = res.count
    },

    handleSizeChange(val) {
      const that = this
      console.log(`每页 ${val} 条`)
      that.pageSize = val
      that.selectWrt()
    },
    handleCurrentChange(val) {
      const that = this
      console.log(`当前页: ${val}`)
      that.currentPage = val
      that.selectWrt()
    },
    // 同意教师
    async delTeacher(id){
      const that = this
      const{data:res} = await axios.get("http://localhost:81/wrt/delete",{
        params:{
          id: id
        }
      })
      if(res.code == 200){
        that.selectWrt()
        that.$message.success("同意认证")
      }else{
        that.$message.error(res.msg)
      }
    }
  },
  created() {
    const that = this
    that.selectWrt()
  },
}
</script>

<style lang="less" scoped>
.um-total {
  width: 1610px;
  height: 720px;
  margin-left: 200px;
  padding: 50px;
  .um-tab {
    background-color: #eee;
    width: 1600px;
    height: 800px;
    .tab-top {
      display: flex;
      justify-content: space-between;
      .top-first {
        display: flex;
        margin-left: 50px;
        h5 {
          margin-top: 28px;
          color: #666;
        }
      }
      .top-two {
        margin: 28px 50px 0 0;
      }
    }
    .tab-list {
      width: 1500px;
      margin: auto;
    }
  }
}
</style>
